<!--
 * @Author: zqg
 * @Date: 2021-01-12 21:49:20
 * @LastEditors: zqg
 * @LastEditTime: 2021-03-16 09:43:18
 * @Description: 员工绩效
-->
<template>
  <base-layout>
    <template #searchPanel>
      <search-panel
        :excelPer="'admin'"
        :selectPer="'111'"
        @search="search"
        @export="handleDataExport('Ygjx','员工绩效')"
        :showSearchButton="true"
        :showExportButton="true"
        :showAddButton="false"
      >
        <job-shop
          v-model="formDate.storeId"
          placeholder="所属门店"
        />
        <role-select
          v-model="formDate.roleId"
          placeholder="职位"
        />
        <el-input
          v-model="formDate.user"
          clearable
          placeholder="员工姓名/联系方式"
          style="width: 200px"
        />
        <!-- <el-input v-model="form.text" clearable placeholder="联系方式" style="width: 200px" /> -->
      </search-panel>
    </template>
    <template #contentPanel>
      <data-table
        :value="tableData"
        :total-count="totalCount"
        :has-action="true"
        :table-column-attributes="tableColumnAttributes"
        :width="160"
      >
        <template #action="{row}">
          <i
            class="el-icon-folder-checked"
            title="审核通过"
            style="cursor: pointer;"
            @click="handleDataUpdateEdit(row, '审核通过')"
          ></i>
          <i
            class="el-icon-error"
            title="审核不通过"
            style="color:red; margin-left: 20px;cursor: pointer"
            @click="handleDataUpdateEdit(row, '审核不通过')"
          ></i>
        </template>
      </data-table>
    </template>
  </base-layout>
</template>
<script>
import baseMixin from '@/mixins/base'
import {
  page,
  changeAuditStatus
} from '@/api/after-sale/personnel/employeePerformance'
export default {
  mixins: [
    baseMixin({
      findData: page,
      dataName: ['content', 'totalRecords']
    })
  ],
  data() {
    return {
      tableColumnAttributes: [
        { name: '所属门店', value: 'storeName', type: 'text' },
        { name: '员工姓名', value: 'userName', type: 'text' },
        { name: '员工职位', value: 'roleNames', type: 'text' },
        { name: '联系方式', value: 'phone', type: 'text' },
        { name: '工单号', value: 'orderNo', type: 'text' },
        { name: '项目', value: 'projectType', type: 'text' },
        { name: '项目提成', value: 'commissionAmount', type: 'text' },
        { name: '工时', value: 'workHours', type: 'text' },
        { name: '业绩日期', value: 'createTime', type: 'text' },
        { name: '备注', value: 'remark', type: 'text' },
        { name: '审核状态', value: 'status', type: 'text' }
      ],
      formDate: {
        // 门店id
        storeId: '',
        // 职位id
        roleId: '',
        user: ''
      },
      jobList: [],
      param: {
        id: 0,
        status: ''
      }
    }
  },
  methods: {
    /**
     * @description: 查询
     * @param {*}
     * @return {*}
     */
    search() {
      this.searchOptions = this.formDate
      this.currentPage = 1
      this.setTableData()
    },
    /**
     * @description: 通过/不通过操作处理
     * @param {Object} 绩效信息
     * @param {String} 是否通过
     * @return {*}
     */
    handleDataUpdateEdit(row, status) {
      this.param.id = row.id
      this.param.status = status
      if (status === '审核通过') {
        this.changeStatus()
      } else {
        this.$prompt('审核不通过：', '审核不通过', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          showInput: true,
          inputType: 'textarea',
          inputPlaceholder: '请输入审核不通过原因'
        })
          .then(({ value }) => {
            this.changeStatus(value)
          })
          .catch(() => { })
      }
    },
    /**
     * @description: 审核通过/不通过接口调用
     * @param {String} 是否通过
     * @return {*}
     */
    changeStatus(failureRemark = '') {
      changeAuditStatus({ ...this.param, failureRemark }).then(res => {
        let { success } = res
        if (success) {
          this.$message.success('操作成功')
          this.setTableData()
        }
      })
    }
  }
}
</script>
